<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> Tracker Club </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

		<!-- SmartAdmin RTL Support is under construction
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
		 -->
		<!-- GOOGLE FONT 
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
		-->
		
		<!-- CSS Personalizado -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/trackerclub.css">		
		
	</head>

<style>

.google_maps {
  width: 100%;
  height: 100%;
  position: top;
}

.label_speed {
	position:absolute;
	right:5px;
	bottom:0px;
	width: 60px;
	height: 60px;
	font-weight: bold;
	font-size: 16px;
	text-align:center;
	
}

.label_km {
	position:absolute;
	right:5px;
	bottom:30px;
	width: 60px;
	font-weight: bold;
	font-size: 10px;
	text-align:center;
	
}

.img_speed {
	position:absolute;
	right:5px;
	bottom:10px;
	width: 60px;
	height: 60px;
	text-align:center;
	
}
</style>	

	<body class="">
	<div id="map_canvas1" class="google_maps" z-index="5"></div>
	<div class="img_speed"><img src="img/img_speed.png" width="50"></div>
	<div id="txtSpeed" class="label_speed">0</div>
	<div id="txtKm" class="label_km">Km/h</div>	
	<div id="ic_mi" style="position:absolute;right:75px;bottom:25px;"><a href="javascript:setFocus(true);"><img src="img/ic_my_pos.png" border="0" width="40"></a></div>
	
			
		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script>
			if (!window.jQuery) {
				document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
			}
		</script>

		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices: you can disable this in app.js -->
		<script src="js/plugin/fastclick/fastclick.js"></script>

		<!--[if IE 7]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		<script src="js/demo.js"></script>

		<!-- MAIN APP JS FILE -->
		<script src="js/app.js"></script>
		
		<script type="text/javascript" src="js/markerclusterer.js"></script>

		
	</body>

						
						


<script type="text/javascript">
	
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	
	// PAGE RELATED SCRIPTS

	/*
	 * Google Maps Initialize
	 */
	var map;
	var myLatlng;
	var marker;
	var markers =  new Array();
	var markerscluster = [];
	var focus = false;
	 
	var globalLatitude = -23.000179;
	var globalLongitude = -43.334767;
	var accuracy;
	var provider;
	var address;
	var myImei = "";

	function initialize() {
	
	    function generate_map_1() {

	    	myLatlng = new google.maps.LatLng(globalLatitude, globalLongitude);
	    	
	        var mapOptions = {
	            center: myLatlng,
	            zoom: 4,
	        };
	        map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);

	        google.maps.event.addListener(map, 'zoom_changed', function() {
	        	setFocus(false);
	          });


		      google.maps.event.addListener(marker, 'click', function() {
		    	  setFocus(false);
		      });
        
     
	
	        // Setup skin for the map
	        map.mapTypes.set('greyscale_style', google.maps.MapTypeId.TERRAIN);
	        map.setMapTypeId('greyscale_style');
	
	    }
	
	
	    generate_map_1();
	}
	
	
	$(window).bind('gMapsLoaded', initialize);
	window.loadGoogleMaps();


	function clearMarker(pMarker) {
		try {
			pMarker.setMap(null);
		} catch (e) {
			return;
		}
	}
	
	function clearAllMarkers() {
		try {
			 marker.setMap(null);
			 markerscluster = [];
			 for (var i = 0; i < markers.length; i++) {
				 markers[i].setMap(null);
			 }
			
		} catch (e) {
	
			return;
			
		}
	}

	function setFocus(param) {
		focus = param;
		if (focus) {
			myPosition(globalLatitude, globalLongitude, myImei)
		}
	}
	
	function myPosition(latitude, longitude, imei) {
		try {
			globalLatitude = latitude;
			globalLongitude = longitude;
			myImei = imei;
			myLatlng = new google.maps.LatLng(latitude, longitude);
			
	        marker = new google.maps.Marker({
	            position: myLatlng,
	            id: imei,
	            map: map,
	            icon: 'img/marker_car.png',
	            title: 'Sua posição'
	        });
	
	        //marker.setMap(map);
	        //clearMarker(marker);
	        clearMarker(markers[0]);
	        markers[0] = marker; // cache marker in markers object

	        setPoint(marker);

	    	if (focus) {
                map.setCenter(myLatlng);
                map.setZoom(15);		    	
	        	map.panTo(myLatlng);
	    	}
	        
	
		} catch (e) {

			return;
			
		}
        
	}       


	/*
	Funcão chamada através da classe .java para apresentar as informações de GPS.
	*/
	function setGpsInfo(jsonObject)
	{

		try {
			
			speed 						= jsonObject.Speed;
			latitude 					= jsonObject.Latitude;
			longitude 					= jsonObject.Longitude;
			myImei 						= jsonObject.Imei;

			myPosition(latitude, longitude, myImei);

		
		} catch (e) {
			return;
			
		}		

	}


	/*
	Funcão chamada através da classe .java para apresentar as informações de GPS.
	*/
	function setSpeedInfo(jsonObject)
	{

		try {
			
			speed 						= jsonObject.Speed;

			if (speed > 20) {
				setFocus(true);
			}

			document.getElementById('txtSpeed').innerHTML 			= speed;
		
		} catch (e) {
			document.getElementById('txtSpeed').innerHTML 			= "0";
			return;
			
		}		

	}	

	function setAllPosition(jsonListObject) {
		try {
			clearAllMarkers();
			reloadGpsInfo();
			var array  = jsonListObject;
			 for(i = 0; i < array.length; i++) {
				if (myImei != array[i].nuImei) {
					imei = array[i].nuImei;

					myLatlng = new google.maps.LatLng(array[i].nuLatitude, array[i].nuLongitude);

			        marker = new google.maps.Marker({
			            position: myLatlng,
			            id: imei,
			            map: map,
			            icon: 'img/marker_car_friend.png',
			            title: array[i].dsName
			        });
			        clearMarker(markers[i+1]);
			        markers[i+1] = marker; // cache marker in markers object
			        setPoint(marker);
			 	}
			 }	
			 latlngbounds = new google.maps.LatLngBounds();
			 var mcOptions = {gridSize: 50, maxZoom: 15};
			 var markerCluster = new MarkerClusterer(map, markerscluster, mcOptions);		
			 latlngbounds.extend(marker.position);
		} catch (e) {
			return;
			
		}
	}

	function setPoint(marker) {
		
		  var infowindow = new google.maps.InfoWindow(
		      { content: marker.getTitle(),
		        size: new google.maps.Size(50,50)
		      });
		  google.maps.event.addListener(marker, 'click', function() {
		    infowindow.open(map,marker);
		  });

		  markerscluster.push(marker);

		  
	}
	
	function getAllUserPosition() {
		try {
			AndroidNativeCode.getAllUserPosition();
			window.setTimeout('getAllUserPosition()', 30000);
		} catch (e) {
			return;
			
		}
	}
	
	/*
	Funcão que fica atualizando a posição GPS.
	*/
	function reloadGpsInfo() {
		try {
			AndroidNativeCode.getGpsInfo();
			//fakeGPS();
			window.setTimeout('reloadGpsInfo()', 5000);
		} catch (e) {
			return;
		}	
	}

	/*
	Funcão que fica atualizando a velocidade.
	*/
	function reloadSpeedInfo() {
		try {
			AndroidNativeCode.getSpeedInfo();
			//fakeGPS();
			window.setTimeout('reloadSpeedInfo()', 500);
		} catch (e) {
			return;
		}	
	}
	

	reloadGpsInfo();
	reloadSpeedInfo();
	getAllUserPosition();
	//alert("alou");
	//setGpsInfo({"Accuracy":"8.3","Latitude":"-22.8822198","Speed":0,"Longitude":"-43.7334609","Provider":"GPS","Imei":"357197050749277"});
	//setAllPosition([{"nuId":25,"nuImei":355385053217127,"nuLatitude":-20.65279,"nuLongitude":-40.474681,"nuAccuracy":37.5,"nuSpeed":0.0,"dsProvider":"Rede","dtPosition":1411335370000,"dtInserted":1411335981000},{"nuId":110,"nuImei":357139056376069,"nuLatitude":-22.9041844,"nuLongitude":-43.175706,"nuAccuracy":28.0,"nuSpeed":26.1,"dsProvider":"GPS","dtPosition":1411487205000,"dtInserted":1411487467000},{"nuId":144,"nuImei":357197050749277,"nuLatitude":-22.8926396,"nuLongitude":-43.6947271,"nuAccuracy":3.0,"nuSpeed":135.0,"dsProvider":"GPS","dtPosition":1411642785000,"dtInserted":1411643454000},{"nuId":27,"nuImei":357197050749319,"nuLatitude":-22.9711359,"nuLongitude":-43.3833184,"nuAccuracy":56.251,"nuSpeed":0.0,"dsProvider":"Rede","dtPosition":1411335086000,"dtInserted":1411337143000}]);
</script>
	
</html>